<template>
  <div>
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item><a href="/home">主页</a></a-breadcrumb-item>
      <a-breadcrumb-item>商品管理</a-breadcrumb-item>
      <a-breadcrumb-item>业务逻辑</a-breadcrumb-item>
      <a-breadcrumb-item><a href="/goods">商品列表</a></a-breadcrumb-item>
      <a-breadcrumb-item>详情</a-breadcrumb-item>
    </a-breadcrumb>
    <a-descriptions title="数据表单" bordered>
      <a-descriptions-item label="商品名称">
        {{ dList.goods_name }}
      </a-descriptions-item>
      <a-descriptions-item label="商品价格（元）">
        {{ dList.goods_price }}
      </a-descriptions-item>
      <a-descriptions-item label="商品状态">{{ state }}</a-descriptions-item>
      <a-descriptions-item label="添加时间">
        {{ dList.add_time | timeout }}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间" :span="2">
        {{ dList.upd_time | timeout }}
      </a-descriptions-item>
      <a-descriptions-item label="商品重量">
        {{ dList.goods_weight }}
      </a-descriptions-item>
      <a-descriptions-item label="商品数量">
        {{ dList.goods_number }}</a-descriptions-item
      >
      <a-descriptions-item label="展示图片">
        <a-list :grid="{ gutter: 16, column: 4 }">
          <a-list-item v-for="item in dList.pics" :key="item.pics_id">
            <img class="img" :src="item.pics_mid" alt="" />
          </a-list-item>
        </a-list>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import { timeout } from "@/utils/time";
import Bread1 from "@/components/bread/Bread1";
import { reqById } from "@/api";
export default {
  data() {
    return {
      breadtitle: ["商品管理", "商品列表", "详情"],
      dList: {},
    };
  },
  components: {
    Bread1,
  },
  created() {
    this.getDetails();
  },
  computed: {
    state() {
      if (this.dList.goods_state == 0) {
        return "未通过";
      } else if (this.dList.goods_state == 1) {
        return "审核中";
      } else {
        return "已审核";
      }
    },
  },
  methods: {
    async getDetails() {
      let res = await reqById(this.$route.query.id);
      // console.log( this.$route.query.id);
      //   console.log(res);
      if (res.meta.status == 200) {
        this.dList = res.data;
      }
    },
  },
  filters: { timeout },
};
</script>
<style lang="less" scoped>
img {
  width: 50%;
}
</style>